<template>
    <div>
        <div class="map-nav">
            <div @click="checkCinema(1)" :class="{map_color:mapActive==1}">{{brand}}</div>
            <div @click="checkCinema(2)" :class="{map_color:mapActive==2}">{{district}}</div>
            <div @click="checkCinema(3)" :class="{map_color:mapActive==3,confirm_color:isConfirm}" >{{chose}}</div>
        </div>

        <selectCinemas class="cinema_navs" v-if="filterCinemas" :filter-cinemas="filterCinemas" :select-list="selectList" :show-index="showIndex" @change-brand="changeBrand" @change-district="changeDistrict" @change-subway="changeSubway"  @hidden-click="hiddenclick" @sumbit-btn="sumbitBtn"></selectCinemas>
    </div>
</template>
<script>
import selectCinemas from './select'

export default {
  data () {
    return {
      brand: '品牌',
      district: '全城',
      chose: '筛选',
      showIndex: 0,
      mapActive: 0,
      isConfirm: false
    }
  },
  props: ['filterCinemas', 'selectList'],
  components: { selectCinemas },
  methods: {
    checkCinema (index) {
      this.showIndex = index
      this.mapActive = index
    },
    // 切换电影院事件
    changeBrand (item) {
      this.showIndex = 0
      this.mapActive = 0
      this.brand = item.name
      this.$emit('change-brand', item)
    },

    // 行政区域事件
    changeDistrict (obj) {
      this.showIndex = 0
      this.mapActive = 0
      this.district = obj.area ? obj.area.name : obj.district.name
      this.$emit('change-district', obj)
    },

    // 切换地铁事件
    changeSubway (obj) {
      this.showIndex = 0
      this.mapActive = 0
      this.district = obj.station ? obj.station.name : obj.subway.name
      this.$emit('change-subway', obj)
    },

    // 服务筛选事件
    sumbitBtn (item) {
      this.showIndex = 0
      this.mapActive = 0
      if (item.hallTypeId != -1 || item.serviceId != -1) {
        this.isConfirm = true
      } else {
        this.isConfirm = false
      }
      this.$emit('sumbit-btn', item)
    },

    hiddenclick (e) {
      this.showIndex = 0
      this.mapActive = 0
    }
  }

}
</script>
<style scoped>
.map-nav{
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    color: #b2b2b2;
    border-bottom: 1px solid #e6e6e6;
}
.map-nav div{
    flex-shrink: 0;
    width: 33.3%;
    margin: 10px 0px;
    text-align: center;
    border-right: 1px solid #eee;
}
.map-nav div:last-child{
    border: none;
}
.cinema_navs{
    position: absolute;
    width: 100%;
    z-index:10;
}
.map_color,
.confirm_color{
    color: #F34D41
}
</style>
